
<template>
    <div class="main">
        <top-bar></top-bar>
        <div class="main-mains w90">
            <div class="main-mains-l">
                <router-link to="/main">
                    <div class="main-mains-l-return">
                        <span>←</span>
                        返回首页
                    </div>
                </router-link>
                <router-link to="/party">
                    <div>发布党建新时代</div>
                </router-link>
                <router-link to="/partylist">
                    <div>已发布党建新时代</div>
                </router-link>
                <div class="active">更改banner</div>
            </div>
            <div class="main-mains-r">
                <div class="main-banner">
                    <div class="main-imgs" v-if="imgFlag">
                        <img src="../../../static/images/upload-img.png" alt="">
                        <input type="file" name="file" ref="fileObj" @change="picture">
                    </div>
                    <div class="main-imgs  main-imgss" v-else>
                        <img :src=imgSrc alt="">
                        <img src="../../../static/images/remove.png" class="remove" @click="removeImg()" alt="">
                    </div>
                    <div class="main-img-txt">
                        请上传一张分辨率为750px * 375px的图片
                    </div>
                    <div class="main-img-btn" @click="uploadImg()">
                        确认
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import topBar from "../public/top";
export default {
  components: {
    topBar
  },
  data() {
    return {
      imgFlag: true,
      imgSrc: "",
      files: ""
    };
  },
  methods: {
    getBanner() {
      let _this = this;
      let datas = {
          type:"banner"
      }
      datas  = JSON.stringify(datas)
      _this
        .$http({
          url:
            _this.urls +
            "/imageUrl/findByType",
          method: "POST",
          data:datas
        })
        .then(function(res) {
          let data = res.data;
          if (data.status == "success") {
              if(data.data.img){
                  _this.imgFlag = false;
                  _this.imgSrc = data.data.img;
              }
          } else {
            _this.$message({
              showClose: true,
              message: data.msg,
              type: "error"
            });
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    removeImg() {
      this.imgFlag = true;
      this.files = "";
    },
    uploadImg() {
      let _this = this;
      let fileObj = this.files;
      if (!fileObj) {
        this.$message({
          showClose: true,
          message: "请选择图片",
          type: "error"
        });
        return;
      }
      var url = this.urls + "/uploadBanner";
      this.xmlHttpRequest = this.createXmlHttpRequest();
      this.uploadTimer = setInterval(function() {
        _this.xmlHttpRequest.onreadystatechange = _this.batchUpload();
      }, 1000);
      this.xmlHttpRequest.open("POST", url, true);
      let fd = new FormData();
      fd.append("file", fileObj);
      this.xmlHttpRequest.send(fd);
    },
    batchUpload() {
      let _this = this;
      if (
        this.xmlHttpRequest.readyState == 4 &&
        this.xmlHttpRequest.status == 200
      ) {
        window.clearInterval(this.uploadTimer);
        let responseObj = JSON.parse(this.xmlHttpRequest.responseText);
        if (responseObj.state == "SUCCESS") {
          this.$message({
            showClose: true,
            message: "上传成功！",
            type: "success"
          });
          _this.files = '';
        } else {
          this.$message({
            showClose: true,
            message: responseObj.msg,
            type: "error"
          });
        }
      }
    },
    createXmlHttpRequest() {
      if (window.ActiveXObject) {
        return new ActiveXObject("Microsoft.XMLHTTP");
      } else if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
      }
    },
    picture() {
      let _this = this;
      let demos = this.$refs.fileObj.files[0];
      _this.files = demos;
      let reader = new FileReader();
      let imgUrlBase64;
      if (demos) {
        imgUrlBase64 = reader.readAsDataURL(demos);
        if (demos.size < 2 * 1024 * 1024) {
          reader.onload = function(e) {
            _this.imgSrc = reader.result;
            _this.imgFlag = false;
          };
        } else {
          var canvas, ctx, img64;
          canvas = document.createElement("canvas");
          ctx = canvas.getContext("2d");
          let image = new Image();
          reader.onload = function(e) {
            let result = this.result;
            image.src = reader.result;
            image.onload = function() {
              let widths = image.height;
              let heights = image.width;
              canvas.width = 2000;
              canvas.height = 2000 * widths / heights;
              if (image.width > 2000) {
                ctx.drawImage(image, 0, 0, 2000, 2000 * widths / heights);
                img64 = canvas.toDataURL("image/jpeg", 0.5);
                _this.imgSrc = img64;
                _this.imgFlag = false;
              } else {
                ctx.drawImage(image, 0, 0, widths, heights);
                img64 = canvas.toDataURL("image/jpeg", 0.5);
                _this.imgSrc = img64;
                _this.imgFlag = false;
              }
            };
          };
        }
      }
    }
  },
  mounted() {
      this.getBanner()
  }
};
</script>

<style lang="less" scoped>
@import "party.less";
</style>



